<template>
  <div class="get_houses">
    <header>
      <div class="forms">
        <van-icon name="arrow-left" @click="goMy" />
        <div class="sear">
          <span @click="goCitylist"
            >{{ city.address }}<i class="iconfont icon-triangle-down"></i
          ></span>
          <form action="">
            <i class="iconfont icon-fangdajing"></i>
            <input type="text" placeholder="请输入小区或地址" />
          </form>
        </div>
        <i class="iconfont icon-dizhi-01" @click="$router.push('/map')"></i>
      </div>
    </header>
    <main>
      <div class="nav">
        <van-dropdown-menu>
          <van-dropdown-item :overlay="false" title="区域" ref="itemselect">
            <van-area
              title="标题"
              :columns-num="3"
              :area-list="arealist"
              :columns-placeholder="['请选择', '请选择', '请选择']"
            />
            <div class="style-btnBox">
              <div class="style-cancel" @click="cancel">取消</div>
              <div class="style-submit" @click="submit">确定</div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item ref="itemethods" title="方式">
            <van-picker
              title="标题"
              show-toolbar
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
              :columns="columns"
            />
          </van-dropdown-item>
          <van-dropdown-item ref="itemoney" title="租金">
            <van-picker title="标题" show-toolbar :columns="columnsMoney" />
          </van-dropdown-item>
          <van-dropdown-item :overlay="false" ref="itemset" title="筛选">
            <van-popup
              v-model="showPop"
              position="right"
              :style="{ width: '80%', height: '100%' }"
            >
              <!-- 筛选侧面信息 -->
              <div class="side">
                <div class="side-center">
                  <div class="home-item">
                    <h3>户型</h3>
                    <div class="home-span">
                      <span
                        v-for="(val, ind) in sideList.roomType"
                        :key="ind"
                        ref="assortRefs"
                        @click="handleAssort(val, ind)"
                        >{{ val.label }}</span
                      >
                    </div>
                  </div>
                  <div class="home-item">
                    <h3>朝向</h3>
                    <div class="home-span">
                      <span
                        v-for="(val, ind) in sideList.oriented"
                        :key="ind"
                        ref="sideRefs"
                        @click="handleSide(val, ind)"
                        >{{ val.label }}</span
                      >
                    </div>
                  </div>
                  <div class="home-item">
                    <h3>楼层</h3>
                    <div class="home-span">
                      <span
                        v-for="(val, ind) in sideList.floor"
                        ref="floorRefs"
                        @click="handleFloor(val, ind)"
                        :key="ind"
                        >{{ val.label }}</span
                      >
                    </div>
                  </div>
                  <div class="home-item">
                    <h3>房屋亮点</h3>
                    <div class="home-span">
                      <span
                        v-for="(val, ind) in sideList.characteristic"
                        :key="ind"
                        ref="lightRefs"
                        @click="handleLight(val, ind)"
                        >{{ val.label }}</span
                      >
                    </div>
                  </div>
                </div>
                <div class="style-btnBox">
                  <div class="style-cancel" @click="clearAll">清除</div>
                  <div class="style-submit" @click="commitSide">确定</div>
                </div>
              </div>
            </van-popup>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <!-- 房源列表 -->
      <div class="rowgroup">
        <div class="empty" v-if="show">
          <van-empty description="未找到合适的要求房源" />
        </div>
        <div class="dls" v-else>
          <dl v-for="(v, i) in houses" :key="i">
            <dt>
              <img :src="v.houseImg" alt="" />
            </dt>
            <dd>
              <h3 @click="goDetail(v.houseCode)">标题{{ v.title }}</h3>
              <p>{{ v.desc }}</p>
              <span>{{ v.tags[0] }}</span>
              <p>
                <b>{{ v.price }}</b
                >元/月
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { Toast } from "vant";

import axios from "../../utils/axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      houses: [], /// 列表数据
      show: false, /// 页面空提示
      arr: [],
      curIndex: null, ///初始下标
      value: "",
      columns: ["不限", "整租", "合租"],
      columnsMoney: ["100-500", "550-1000", "1000-2500", "2600-3500"],
      showPop: true,
      sideList: [],
      // arealist:{},
      arealist: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
          130000: "河北省",
          140000: "山西省",
          150000: "内蒙古自治区",
          210000: "辽宁省",
          220000: "吉林省",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
          130100: "石家庄市",
          130200: "唐山市",
          130300: "秦皇岛市",
          130400: "邯郸市",
          130500: "邢台市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110105: "朝阳区",
          110106: "丰台区",
          110107: "石景山区",
          110108: "海淀区",
          110109: "门头沟区",
        },
      },
    };
  },
  created() {
    this.show = !this.show;
    /// vant轻提示
    const toast = Toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
    });
    axios.get(`/houses?cityId=${this.city.value}`).then((res) => {
      console.log(res, "home");
      if (res.data.status === 200) {
        this.houses = res.data.body.list;
      }
      this.show = false; ///关闭页面空提示
      toast.clear(); ///关闭轻提示
      this.$toast("已加载" + res.data.body.list.length + "条数据");
    });
    // 请求侧面筛选数据
    this.getSide();
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    /// 筛选 多选toggle
    handleAssort(val, ind) {
      console.log(this.$refs.assortRefs[ind].innerHTML, "assortRefs");
      this.$refs.assortRefs[ind].classList.toggle("active");
    },
    handleSide(val, ind) {
      this.$refs.sideRefs[ind].classList.toggle("active");
    },
    handleFloor(val, ind) {
      this.$refs.floorRefs[ind].classList.toggle("active");
    },
    handleLight(val, ind) {
      this.$refs.lightRefs[ind].classList.toggle("active");
    },
    clearAll() { /// 筛选侧边 点击清除
      console.log(1234)
    },
    commitSide() { 
      let result = this.$refs.assortRefs
        .filter((item) => item.className === "active")
        .map((item) => {
          return item.innerHTML;
        })
      // this.$refs.itemset.toggle();
      console.log(result);
    },
    getSide() {
      axios
        .get("/houses/condition?id=AREA%7C88cff55c-aaa4-e2e0")
        .then((res) => {
          console.log(res, "筛选");
          this.sideList = res.data.body;
          console.log({...this.sideList.area.children})
        })
    },
    goDetail(houseCode) {
      this.$router.push({ path: `/detail/${houseCode}` });
      // this.$router.push(`/detail/${houseCode}`)
      console.log(houseCode, "码数");
    },
    goCitylist() {
      this.$router.push("/citylist");/// 跳转到城市列表
    },
    cancel() {
      console.log("点击取消下拉显示");
      this.$refs.itemselect.toggle();
    },
    submit() {
      console.log("确定选中内容了");
      this.$refs.itemselect.toggle();
    },
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      this.houses.filter((item) => {
        return item.includes() === item;
      })
      console.log(value, index);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast("取消");
    },
    goMy() { 
      this.$router.push("/home/profile");// 点击<跳转到我的页
    },
  },
};
</script>

<style lang='scss' scoped>
.get_houses {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  header {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #ccc;
    padding: 0 0.1rem;
  }
}
.forms {
  width: 100%;
  height: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sear {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 0.05rem;
    span {
      width: 1.5rem;
      text-align: center;
      i {
        color: #000;
      }
    }
    form {
      flex: 1;
      display: flex;
      align-items: center;
      border-radius: 0.12rem;
      i {
        width: 0.4rem;
        text-align: center;
        color: #000;
      }
      input {
        flex: 1;
        height: 0.64rem;
        border: none;
        outline: none;
      }
    }
  }
  i {
    margin: 0 0.1rem;
    color: #000;
    font-size: 16px;
  }
}
main {
  background-color: #fff;
}
.nav {
  width: 100%;
  height: 1rem;
  position: sticky;
  top: 0;
  left: 0;
}
.van-dropdown-menu {
  width: 100%;
  height: 1rem;
  background-color: #afb2b3;
  border-bottom: 1px solid #eee;
}
.style-btnBox {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
  .style-cancel {
    text-align: center;
    box-sizing: border-box;
    flex: 1;
    margin-left: 0.16rem;
    min-width: 0.2rem;
  }
  .style-submit {
    flex: 1;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
    background-color: #21b97a;
  }
}
.empty {
  /// 空提示
  width: 100%;
  height: 10rem;
}
.van-popup {
  margin-top: 0.8rem;
  background-color: #fff;
  .side {
    width: 100%;
    height: calc(100%-2rem);
    display: flex;
    flex-direction: column;
    .side-center {
      flex: 1;
      overflow-y: scroll;
    }
    .style-btnBox {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      border-top: 1px solid #eee;
      .style-cancel {
        text-align: center;
        box-sizing: border-box;
        flex: 1;
        margin-left: 0.16rem;
        min-width: 0.2rem;
      }
      .style-submit {
        flex: 1;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        color: #fff;
        background-color: #21b97a;
      }
    }
  }
  .active {
    border: 1px solid #21b97a;
    color: #21b97a;
    background-color: #defaef;
  }
}
.home-item {
  width: 100%;
  min-height: 1.5rem;
  margin: 0.2rem 0;
  border-bottom: 1px solid #eee;
  h3 {
    height: 0.6rem;
    font-weight: normal;
    padding-left: 0.2rem;
  }
  .home-span {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0.1em;
    span {
      padding: 0.1rem 0.2rem;
      font-size: 14px;
      border: 1px solid #ccc;
      margin: 0.13rem;
      border-radius: 0.1rem;
    }
  }
}
.rowgroup {
  width: 100%;
  height: auto;
  dl {
    width: 100%;
    height: 2.6rem;
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-bottom: 1px solid #eee;
    dt {
      width: 2.1rem;
      height: 100%;
      margin: 0 0.2rem;
      img {
        width: 2.1rem;
        height: 1.6rem;
      }
    }
    dd {
      flex: 1;
      h3 {
        font-size: 15px;
        letter-spacing: 0;
        overflow: hidden;
      }
      p {
        font-size: 12px;
        color: #afb2b3;
        padding: 0.2rem 0;
        b {
          color: #f77878;
          font-size: 18px;
        }
      }
      span {
        color: #39becd;
        background: #e1f5f8;
        font-size: 13px;
        padding: 0.1rem;
      }
    }
  }
}
</style>